<template>
  <div class="container1">
    <input type="text" placeholder="请输入任务信息" class="input" v-model.trim="valueText" @keyup.enter="addTask">
    <button @click="addTask" class="btn">添加新任务</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      valueText: ''
    }
  },
  props: {

  },
  emits: ['add'],
  methods: {
    addTask() {
      if(this.valueText === '') {
        return alert('输入框不能为空！')
      } else {
        this.$emit('pushText', this.valueText),
        this.valueText = ''
      }
    }
  }
}
</script>

<style scoped>
  .container1{
    /* display: flex; */
    width: 600px;
  }
  .btn {
    height: 30px;
    background-color: blue;
    color: white;
    border: 0;
    margin-left: 10px;
    border-radius: 5px;
  }
  .input{
    width: 400px;
    height: 30px;
  }
</style>